<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>错题</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .foot{
      color: red;
      font-size: 14px;
      background-color: #bfffd5;
      padding: 10px 15px;
      margin-top: 20px;
      line-height: 18px;

    }
    .error{
      display: none;
      text-align: center;
    }
    .img{
      background-image: url("http://rvg6mjj7z.hn-bkt.clouddn.com/img/true1.jpg ");
      background-size: cover;
    }

    .center{
      width: 1200px;
      margin: 0 auto;}
  </style>
</head>
<body>
<div id="app">
  <el-container style="display: flex; flex-direction: column;">
    <my-header></my-header>
    <div class="img">
    <el-main class="center" >
      <el-row gutter="20">
        <el-col span="4">

          <el-card style="height: 300px">
            <el-aside width="200px">
              <el-menu :default-openeds="['1']" class="el-menu-vertical-demo">

                <el-menu-item @click="error1()" >错题集</el-menu-item>
                <el-menu-item @click="error2()">错题练习</el-menu-item>

              </el-menu>
            </el-aside>
          </el-card>
        </el-col>

        <el-col span="20">
          <el-card>
              <div class="error">
                 <span >您目前没有错题</span>
              </div>
          <div v-for="(w,index) in arr">
    <form>
      <h3>
        <span>{{index+1}}</span>:{{w.question}}<br>
        <div>
          <label>
            <input type="radio" name="{{index}}" value="A" disabled="disabled">{{w.optionA}}
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="{{index}}" value="B" disabled="disabled">{{w.optionB}}
          </label>
        </div>

        <div>
          <label>
            <input type="radio" name="{{index}}" value="C" disabled="disabled">{{w.optionC}}
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="{{index}}" value="D" disabled="disabled">{{w.optionD}}
          </label>
        </div>

        <div class="foot" name="co">
          <div>正确答案:{{w.answer}}
            <div>解析:{{w.analysis}}</div>
          </div>
        </div>
      </h3>


    </form>
  </div>
          </el-card>
        </el-col>
      </el-row>

      </el-main>
    </div>
</el-container>
</div>



<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/my-header.js"></script>
<script>

  let v = new Vue({
    el:"body>div",
    data:{
      arr:[],//题目
      user:localStorage.user?JSON.parse(localStorage.user):null,

    },
    created:function (){
      axios.get("/v1/question/"+this.user.username+"/selectById").then(function (response){
        v.arr = response.data;
        console.log(v.arr);
         if(v.arr.length===0){
           $('.error').show();
         }
      })
    },
    methods:{
    error1(){
      location.href='questionError.html'

    },
    error2(){
      location.href='questionErrorExercise.html'

    }
    }

  })

</script>
</body>
</html>